<template>
	<view class="top-safe"
		:style="{'min-height':safeHeight + 'px','zIndex':props.zIndex, height: safeHeight + 'px',backgroundColor:props.bgColor}">
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	/**
	 * 手机上方适配
	 */

	const systemInfo = uni.getSystemInfoSync();
	let safeHeight = ref<number>(0);
	safeHeight.value = systemInfo.safeAreaInsets.top
	let props = defineProps({
		bgColor: {
			type: String,
			default: 'rgba(0,0,0,0)'
		},
		zIndex: {
			type: Number,
			default: 99,
		}
	})
</script>

<style lang="scss" scoped>
	.top-safe {
		display: flex;
		width: 100%;
	}
</style>